<template>
  <div class="dynamic-input-list">
    <div v-for="(item, index) in list" :key="item.key" class="input-item">
      <a-input
        v-model="item.value"
        :placeholder="placeholder"
        @change="handleChange"
        style="width: 100%; margin-top: 8px"
      />
      <a-space class="action-wrap">
        <a-icon type="plus" @click="addItem" class="minus-icon" />
        <a-icon type="minus" v-if="list.length > 1 && index !== 0" @click="removeItem(index)" class="minus-icon" />
      </a-space>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DynamicInputList',
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    placeholder: {
      type: String,
      default: '请输入内容',
    },
    addText: {
      type: String,
      default: '添加项目',
    },
    minItems: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      list: [],
      keyIndex: 0,
      isInternalChange: false, // 添加标志位
    }
  },
  watch: {
    value: {
      handler(newVal) {
        // 如果是内部变化触发的，不处理
        if (this.isInternalChange) {
          this.isInternalChange = false
          return
        }

        if (Array.isArray(newVal) && newVal.length > 0) {
          // 优化：只在必要时更新list，保持现有的key
          if (this.list.length !== newVal.length) {
            // 长度不同时才重新构建
            this.list = newVal.map((item, index) => {
              // 尽量保持原有的key
              const existingItem = this.list[index]
              return {
                key: existingItem ? existingItem.key : this.keyIndex++,
                value: item,
              }
            })
          } else {
            // 长度相同时只更新值
            newVal.forEach((item, index) => {
              if (this.list[index]) {
                this.list[index].value = item
              }
            })
          }
        } else {
          this.initList()
        }
      },
      immediate: true,
    },
  },
  methods: {
    initList() {
      this.list = Array.from({ length: this.minItems }, () => ({
        key: this.keyIndex++,
        value: '',
      }))
    },
    addItem() {
      this.list.push({
        key: this.keyIndex++,
        value: '',
      })
      this.handleChange()
    },
    removeItem(index) {
      if (this.list.length > this.minItems) {
        this.list.splice(index, 1)
        this.handleChange()
      }
    },
    handleChange() {
      const values = this.list.map((item) => item.value)
      this.isInternalChange = true // 设置标志位
      this.$emit('input', values)
      this.$emit('change', values)
    },
  },
  mounted() {
    if (!this.value || this.value.length === 0) {
      this.initList()
      this.handleChange()
    }
  },
}
</script>

<style lang="less" scoped>
.dynamic-input-list {
  .input-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    position: relative;

    &:last-of-type {
      margin-bottom: 0;
    }
    .action-wrap {
      margin-left: 8px;
      display: flex;
      width: 80px;
      position: absolute;
      align-items: center;
      right: -90px;
      padding-top: 6px;
      .ant-space-item {
        display: flex;
        align-items: center;
      }
      .minus-icon {
        cursor: pointer;
        color: @primary-color;
        font-size: 18px;
      }
    }
  }
}
</style>
